<template>
    <div>
        <div class="container">
            <el-main>
                <el-form ref="memberSubjectFormRef" :rules="memberSubjectFormRules" :model="memberSubjectForm" :label-width="formLabelWidth">
                    <el-form-item label="ID" prop="id" v-if="false">
                        <el-input v-model="memberSubjectForm.id" c/>
                    </el-form-item>
					<!-- 常规信息 -->
					<el-form-item label="话题类型" prop="contentType">
                        <el-input v-model="memberSubjectForm.contentType" clearable class="handle-input mr10" v-if="false"/>
                        <el-select v-model="memberSubjectForm.contentType" class="handle-select mr10" placeholder="请选择">
                            <el-option v-for="item in contentTypeOpt" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
					<el-form-item label="话题标题" prop="contentTitle">
                        <el-input v-model="memberSubjectForm.contentTitle" clearable class="handle-input mr10" />
                    </el-form-item>
					<el-form-item label="引用链接" prop="contentUrls">
                        <el-input v-model="memberSubjectForm.contentUrls" clearable class="handle-input mr10" />
                        <el-input type="textarea" rows="5" v-model="memberSubjectForm.contentUrlList" clearable class="handle-input mr10" />
                    </el-form-item>
					<el-form-item label="话题内容" prop="content">
						<el-input type="textarea" rows="5" v-model="memberSubjectForm.content" clearable class="handle-input mr10"  show-word-limit/>
                    </el-form-item>
                    <el-form-item label="是否显示" prop="isShow">
                        <el-input v-model="memberSubjectForm.isShow" v-if="false"/>
                        <el-switch v-model="memberSubjectForm.isShow" 
                            :active-value= "1" :inactive-value= "0"
                            inline-prompt active-text="是" inactive-text="否" />
                    </el-form-item>
                    <el-form-item label="是否允许回复" prop="isCall">
                        <el-input v-model="memberSubjectForm.isCall" v-if="false"/>
                          <el-switch v-model="memberSubjectForm.isCall" 
                            :active-value= "1" :inactive-value= "0"
                            inline-prompt active-text="是" inactive-text="否" />
                    </el-form-item>
                </el-form>
            </el-main>
			<el-footer>
				<el-button type="primary" @click="func_onSubmit" plain>保存数据</el-button>
				<el-button type="success" @click="func_onReset" plain>重置表单</el-button>
				<el-button @click="func_closeDialog" plain>取 消</el-button>
			</el-footer>
        </div>
    </div>
</template>

<script>
import { onMounted, ref, reactive, toRefs, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from "element-plus";
import { findMemberSubjectInfoById, addMemberSubject, saveMemberSubject} from '../../../../api/hairmanager/memberSubject';
import { loadSubjectCommonTypeEnum, } from '../../../../api/dict';

import { NO_DATA_SELECT_ERROR, SUCCESS_ADDDATA_DIALOG_MESSAGE, SUCCESS_DELDATA_DIALOG_MESSAGE, SUCCESS_EDITDATA_DIALOG_MESSAGE, formLabelWidth, } from "../../../../api/CommonErrorMessage.js";

export default {
    name: "MemberSubjectInfo",
	props:{
		selectValue: Object
	},
	emits: ["MemberSubjectData"],
    setup(props, cex){
		onMounted(() => {
		});
        const router = useRouter();
		const route = useRoute();
        const formLabelWidth = ref("170px");
        const loadFlg = ref(false);
		/**
         * @name 定义业务表单
         */
        const getInitFormData = () => {
            return {
				commonJson: '',
                content: '',
                contentType: '',
				contentTitle: '',
				contentUrls: '',
				createTime: '',
				id: 0,
				isCall: 0,
				isShow: 0,
				memberId: 0
			}
        };
		const MemberSubjectUpWayOpt = ref([]);
        /**
         * @name 表单初始化
         */
        const resetMemberSubjectForm = () => {
            Object.assign(memberSubjectForm, getInitFormData());
            
        };
		const memberSubjectForm = reactive(getInitFormData());
		const memberSubjectFormRef = ref(null);
        const memberSubjectFormRules = {
            contentTitle: [
                { required: true, message: "请输入等级名称", trigger: "blur" },
            ],
        };
        const contentTypeOpt = ref([]);
		// =========================================================================================
		// 主业务处理 ========================================================================================= START
        // 提交
        const func_onSubmit = () => {
            // 表单校验
            memberSubjectFormRef.value.validate((valid) => {
                if (valid) {
                    if(loadFlg.value){
                        saveMemberSubject(memberSubjectForm).then((res) => {
							if(res.code != 200) {
								ElMessage.error(res.message);
							} else {
								resetMemberSubjectForm();
								ElMessage.success(SUCCESS_EDITDATA_DIALOG_MESSAGE);
								cex.emit('MemberSubjectData', {state: 1, data: []});
							}
						});
                    } else {
                        addMemberSubject(memberSubjectForm).then((res) => {
							if(res.code != 200) {
								ElMessage.error(res.message);
							} else {
								resetMemberSubjectForm();
								ElMessage.success(SUCCESS_ADDDATA_DIALOG_MESSAGE);
								cex.emit('MemberSubjectData', {state: 1, data: []});
							}
						});
                    }
                } else {
                    return false;
                }
            });
        };
        // 重置
        const func_onReset = () => {
			resetMemberSubjectForm();
        };
		const func_closeDialog = () => {
            cex.emit('MemberSubjectData', {state: 1, data: []});
        };
        // 页面初始化
        const func_onload = (v) => {
			if(loadFlg.value){
				findMemberSubjectInfoById(v).then((res) => {
					Object.keys(memberSubjectForm).forEach((item) => {
                        memberSubjectForm[item] = res.data[item];
                    });
				});
			} else {
				resetMemberSubjectForm();
			};
            loadSubjectCommonTypeEnum().then((res) => {
				res.data.forEach((item) => {
					contentTypeOpt.value.push({label: item['label'],value: item['value']});
				});
            });
        }
		// 主业务处理 ========================================================================================= END
        watch(() => props.selectValue, (val) => {
            let id = val['id'];
            loadFlg.value = val['load'];
			func_onload(id);
        }, {deep: true,immediate: true});
        return {
			loadFlg, formLabelWidth, memberSubjectFormRules, memberSubjectFormRef, memberSubjectForm, contentTypeOpt,
			resetMemberSubjectForm, getInitFormData, func_onload, func_onSubmit, func_onReset, func_closeDialog,
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 300px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
</style>